<template>
  <div class="main_spac1">
    <div class="main_white padding10">
      <div class="mainor_form batch-wrap small-top">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="90px"
          id="form"
        >
          <el-form-item label="商品名称：" prop="goods_spu_id">
            <change-goods-input
              ref="changeGoodsInput"
              @clear="
                () => {
                  this.form.goods_spu_id = '';
                }
              "
              @sendValue="
                (data) => {
                  this.form.goods_spu_id = data.id;
                }
              "
            ></change-goods-input>
          </el-form-item>
          <el-form-item label="商品分类：" prop="category_id" class="wid220">
            <el-cascader
              v-model="form.category_id"
              :options="options"
              :props="defaultProps"
              @change="getArticleList"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="配送日期：" prop="send_time">
            <el-date-picker
              v-model="form.send_time"
              type="date"
              class="time220"
              :editable="false"
              placeholder="配送时间"
              value-format="yyyy-MM-dd"
              :clearable="false"
              @change="getArticleList"
            />
          </el-form-item>
          <MainFormBtn width="190" @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="moredata">
            <el-button @click="derive">导入</el-button>
          </MainFormBtn>
          <div class="more el-form-item" @click="more">
            <span>更多</span>
            <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
          </div>
          <div class="clearfix"></div>
          <el-collapse-transition>
            <div v-show="moredata">
              <el-form-item label="用户分组：" prop="group_id">
                <el-select
                  v-model.trim="form.group_id"
                  placeholder="用户分组"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(group, index) in groupList"
                    :key="index"
                    :label="group"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-tooltip
                  class="item marginRight5 mainor_tei"
                  effect="dark"
                  placement="bottom"
                  style="line-height: 33px"
                >
                  <div slot="content">用户搜索结果不影响一键同步</div>
                  <svg aria-hidden="true" class="navbar_svg" width="16" height="16">
                    <use xlink:href="#icon-summary_question" />
                  </svg>
                </el-tooltip>
              </el-form-item>
              <div class="clearfix"></div>
              <el-form-item label=" ">
                <MainFormBtn class="btn-bottom" @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="!moredata">
                  <el-button @click="derive">导入</el-button>
                </MainFormBtn>
              </el-form-item>
            </div>
          </el-collapse-transition>
        </el-form>
      </div>
      <div class="main-controls-wrap">
        <div>
          <el-button @click="Alltongbu">一键同步</el-button>
          <router-link
            :to="{
              name: 'order_batch_record',
              params: { time: form.send_time },
            }"
            >
            <el-button class="mg-l-5">操作记录</el-button>
          </router-link>
        </div>
        <div>
          <el-checkbox @change="selChange(1)" v-model="exclude_online_orders">排除在线支付订单</el-checkbox>
          <el-checkbox @change="selChange(2)" v-model="synchronous_price">修改后同步至分组报价</el-checkbox>
          <el-tooltip class="item" effect="dark" placement="bottom">
            <div slot="content">
              执行修改后，会同步修改分组报价公式，<br />没有设置公式的修改SKU市场价
            </div>
            <svg aria-hidden="true" class="navbar_svg" width="16" height="16">
              <use xlink:href="#icon-summary_question" />
            </svg>
          </el-tooltip>
        </div>
      </div>
      <div class="main_table">
        <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="data_list"
        element-loading-text="加载中"
        fit
        border
        highlight-current-row
        :row-class-name="getRowClass"
        :height="borderHeight"
        :header-cell-class-name="this.$verticaline"
        :header-cell-style="tableHeightStyle"
        @header-dragend="changeTableWidth"
        @sort-change="tableSortChange"
      >
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <div class="maincg_ul">
              <ul class="boxha">
                <li
                  class="box"
                  v-for="(item, index) in props.row.group"
                  :key="index"
                >
                  <span
                    :style="{ color: item.is_update == 1 ? '#03ac54' : '#333' }"
                    >{{ item.title }}：</span
                  >
                  <div class="maincg_uli">
                    <el-input
                      v-model.trim="item.real_price"
                      class="wid200"
                      :ref="'maincg' + String(props.$index) + String(index)"
                      @blur.prevent="
                        (val) => {
                          maincgBlur(val, props.$index, index, props.row);
                        }
                      "
                      @input="handleNumInput(item, 'real_price')"
                      @keyup.enter.native="$event.target.blur"
                    ></el-input>
                    <el-tooltip
                      class="maincg_uli_s"
                      effect="dark"
                      content="当前修改的是已生成订单的配送单价，如需往后的订单按此修改价，则需同步分组报价。现在展示的是已生成订单的配送单价，一个自然日后会重新展示分组报价"
                      placement="bottom"
                      v-if="item.is_update == 1"
                    >
                      <svg
                        aria-hidden="true"
                        class="navbar_svg new_navbar_svg"
                        width="14"
                        height="14"
                      >
                        <use xlink:href="#icon-summary_question" />
                      </svg>
                    </el-tooltip>
                  </div>
                </li>
              </ul>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="商品名称"
          prop="goods_name"
          :width="tableWidth[hash + 'goods_name'] || 200"
        >
          <template slot-scope="scope">
            {{ scope.row.goods.name }}【{{
              scope.row.spu_name ? scope.row.spu_name.title : ""
            }}】
          </template>
        </el-table-column>
        <el-table-column
          label="商品规格"
          prop="spu_unit.title"
          :width="tableWidth[hash + 'spu_unit.title'] || 120"
        />
        <el-table-column
          label="市场价"
          prop="market_price"
          sortable="custom"
          :width="tableWidth[hash + 'market_price'] || 100"
        />
        <el-table-column
          label="采购价"
          prop="purchase_price"
          :width="tableWidth[hash + 'purchase_price'] || 100"
        >
          <template #header>
            <div class="filter-box">
              <span class="filter-text">{{ priceTypeList[orderBatchPriceType].name }}</span>
              <el-dropdown trigger="click" @command="changeOrderBatchPriceType">
                <div><svg-icon icon-class="filter"></svg-icon></div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item 
                    v-for="item in priceTypeList" 
                    :key="item.value"
                    :command="item.value"
                    :class="{ dropdownActive: item.value == orderBatchPriceType }"
                  >
                    {{ item.name }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
          <template slot-scope="scope">
            <span :style="{ color: scope.row.red ? 'red' : '' }">
              {{ scope.row.purchase_price }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="下单数量"
          prop="order_num"
          class-name="main_hei"
          :width="tableWidth[hash + 'order_num'] || 100"
        >
          <template slot-scope="scope">
            <span class="showDialog" @click="openOrderNumDialog(scope.row)">
              {{ scope.row.order_num }}
              <svg-icon icon-class="xiadan" style="margin-left: 5px" />
            </span>
          </template>
        </el-table-column>

        <el-table-column 
          prop="customer_price"
          class-name="main_hei"
          :width="tableWidth[hash + 'customer_price'] || 800"
        >
          <template slot="header">
            <span>设置不同客户类型价格</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="修改成功后，将按最新的定价进行配送，如需同步至分组报价，可勾选“操作”上方的复选框，操作同步；也可以点击“保存并同步至分组报价”按钮同步。红色表示当前栏有过改价记录，黑色字体表示没有改价记录"
              placement="right"
            >
              <svg
                aria-hidden="true"
                class="navbar_svg new_navbar_svg"
                width="14"
                height="14"
              >
                <use xlink:href="#icon-summary_question" />
              </svg>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div class="boxha maincg_bj">
              <!-- <p>
                  <span>未分组：</span>
                  {{ scope.row.market_price ? scope.row.market_price : "" }}
                </p> -->
              <p v-for="(item, index) in scope.row.group" :key="index">
                <span class="maincg_span">{{ item.title }}：</span>
                <span
                  :style="{ color: item.is_update == 1 ? '#03ac54' : '#333' }"
                  >{{ item.real_price }}</span
                >
                {{ item.category_price > 0 ? "(分类)" : "" }}
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="当前修改的是已生成订单的配送单价，如需往后的订单按此修改价，则需同步分组报价。现在展示的是已生成订单的配送单价，一个自然日后会重新展示分组报价"
                  placement="bottom"
                  v-if="item.is_update == 1"
                >
                  <svg
                    aria-hidden="true"
                    class="navbar_svg new_navbar_svg"
                    width="14"
                    height="14"
                  >
                    <use xlink:href="#icon-summary_question" />
                  </svg>
                </el-tooltip>
              </p>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          prop="userNickname"
          class-name="main_hei"
          :min-width="tableWidth[hash + 'userNickname'] || 250"
          :resizable="false"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="green"
              v-if="scope.row.down"
              @click="formula_save(scope.row, scope.$index)"
              >保存</el-link
            >
            <el-link
              type="primary"
              v-if="scope.row.down && !synchronous_price"
              @click="formula_tongbu(scope.row, scope.$index)"
              >保存并同步至分组报价</el-link
            >
            <el-link
              type="danger"
              class="maincg_xa"
              @click="formula_meth(scope.row, scope.$index)"
              v-if="!scope.row.down"
              >修改报价</el-link
            >
            <el-link
              type="success"
              class="maincg_xa"
              @click="formula_meth(scope.row, scope.$index)"
              v-if="scope.row.down"
              >收起</el-link
            >
            <el-link class="maincg_xa" @click="openHistory(scope.row)"
              >采购历史</el-link
            >
            <el-link class="maincg_xa" @click="openHistory2(scope.row)"
              >改价历史</el-link
            >
          </template>
        </el-table-column>
        </el-table>
      </div>
      <!-- <div class="main_page boxdq">
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div> -->
    </div>
    <!-- 批量同步 -->
    <el-dialog
      :title="'已选择' + data_list.length + '个商品，同步中！'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
      :visible.sync="addedFormVisible"
      class="main_dialog dialog450"
    >
      <div class="notice">
        <el-progress
          :text-inside="true"
          :stroke-width="15"
          :percentage="percent"
          status="success"
          color="#19B098"
        ></el-progress>
        <div class="progress_list">
          <!-- <template v-for="(percent_list, index) in reverseSum">
            <template v-if="index < 5">
              <p v-if="percent_list.type == 1" :key="index">
                商品id:{{ percent_list.order_id }}，同步已成功
              </p>
              <p v-else class="progress_list_red" :key="index">
                商品id:{{ percent_list.order_id }}，同步失败
              </p>
            </template>
          </template> -->
          <p v-if="percent == 100" class="progress_list_su">
            同步已经完成请关闭弹框!
          </p>
        </div>
      </div>
    </el-dialog>

    <!-- 采购历史 -->
    <el-dialog
      title="采购历史"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="historyClose"
      :visible.sync="shopHistoryDia"
      class="main_dialog"
      width="70%"
    >
      <el-form ref="form" :model="forms" :inline="true" label-width="90px">
        <el-form-item label="采购方式：">
          <el-select
            v-model="forms.value"
            placeholder="请选择"
            @change="changeProcure"
          >
            <el-option
              v-for="(item, index) in procureList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示样式：">
          <el-radio-group v-model="forms.type" size="small">
            <el-radio-button label="0">图表展示</el-radio-button>
            <el-radio-button label="1">表格展示</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div
        v-show="forms.type == 0"
        id="main"
        style="width: 100%; height: 550px"
      ></div>
      <div v-show="forms.type == 1" class="tabler">
        <el-table :data="tableData" style="width: 100%; height: 500px">
          <el-table-column prop="created_at" label="进货时间">
          </el-table-column>
          <el-table-column prop="purchase_num" label="进货数量">
          </el-table-column>
          <el-table-column prop="name" label="供应商/采购员"> </el-table-column>
          <el-table-column prop="purchase_price" label="进货价格">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 下单数量 -->
    <el-dialog
      title=""
      :visible.sync="dialogTableVisible"
      size="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-table :data="gridData">
        <el-table-column
          property="send_time"
          label="发货日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="order_sn"
          label="订单号"
          width="200"
        ></el-table-column>
        <el-table-column
          property="user_name"
          label="客户名称"
        ></el-table-column>
        <el-table-column
          property="order_num"
          label="下单数量"
        ></el-table-column>
        <el-table-column
          property="group_name"
          label="客户类型"
        ></el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.sort_price"
              type="number"
              placeholder="请输入内容"
              @blur="changePrice(scope.row, scope.$index)"
              @keyup.enter.native="$event.target.blur"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 改价历史 -->
    <el-dialog
      title="改价历史"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="historyClose"
      :visible.sync="priceHistoryDia"
      class="main_dialog"
      width="70%"
    >
      <el-table :data="historyList">
        <el-table-column
          property="goods_name"
          label="商品名称"
          width="150"
        ></el-table-column>
        <el-table-column
          property="unit"
          label="单位"
          width="200"
        ></el-table-column>
        <el-table-column
          property="old_price"
          label="修改前价格"
        ></el-table-column>
        <el-table-column property="price" label="修改后价格"></el-table-column>
        <el-table-column
          property="group_name"
          label="客户类型"
        ></el-table-column>
        <el-table-column property="created_at" label="修改时间">
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="批量核价导入"
      :visible.sync="pricingDialog"
      width="40%"
      :before-close="handleClose"
      @close="handleClose"
    >
      <div class="pricingDialog">
        <span>导入说明：</span>
        <span>1.注意使用红色字体标注的必填字段,不填或错填将导致导入失败。</span>
        <span>2.导入文件仅支持xlsx格式,大小不超过2M ,数据不超过2000行。</span>
        <span>3.导入文件不能包含“合并单元格”，否则无法导入。</span>
        <span
          >4.导入时碰到数据不正确的行，系统会跳过错误的行继续执行未完成的行。</span
        >
        <el-divider content-position="left">导入模板筛选条件</el-divider>
        <div class="pricingDialog-form">
          <el-form
            ref="form"
            :model="pricingForm"
            label-width="80px"
            :inline="true"
          >
            <el-form-item label="配送时间">
              <el-date-picker
                v-model="pricingForm.time"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                disabled
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-tooltip
                class="item marginRight5 mainor_tei"
                effect="dark"
                placement="bottom"
                style="line-height: 33px"
              >
                <div slot="content">
                  仅支持下载当前选择好的配送日期的批量核价模板
                </div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="用户分组">
              <el-select
                v-model="pricingForm.region"
                placeholder="请选择用户分组"
                @change="changeGroup"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(group, index) in groupList"
                  :key="index"
                  :label="group"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-tooltip
                class="item marginRight5 mainor_tei"
                effect="dark"
                placement="bottom"
                style="line-height: 33px"
              >
                <div slot="content">选择该处分组时，仅影响导入模板格式</div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </el-form-item>
            <br />
            <el-form-item>
              <el-button type="primary" @click="downLoadDemo('/demo')"
                >预览</el-button
              >
              <el-button
                style="margin-right: 5px"
                plain
                @click="downLoadDemo('')"
                >下载导入模板</el-button
              >
              <el-upload
                class="upload-demo"
                :action="approve_price"
                :on-success="importSuccess"
                :on-error="importerr"
                :data="import_params"
                :show-file-list="false"
                :headers="{
                  Authorization: getToken(),
                }"
              >
                <el-button size="small" @click="handleUpload" type="primary"
                  >点击上传</el-button
                >
              </el-upload>
              <p v-if="import_file_name ? true : false">
                上传文件名：{{ import_file_name }}
              </p>
            </el-form-item>
          </el-form>
          <div class="import_process" v-if="percentShow">
            <div class="progress">
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="percent"
                color="#19B098"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pricingDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <big-data ref="demo" v-if="show"></big-data>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import { mapGetters } from "vuex";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import {
  orderList_pricing,
  order_savePrice,
  orderList_batchDispatchPricing,
  hasUnrecordedGoods, //单个商品同步或保存
  hasUnrecordedOrder, //批量同步
  // 获取折线图表的数据
  getPurchasePrice,
} from "@/api/order/orderBatch";
// 获取采购用户接口
import {
  getProcureUser,
  getProcureUserList,
  getHistoryList,
  getUpPrice,
} from "@/api/beCurrent/index.js";
import { setting_company } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { getDefaultDate, recursion, category , handleNumInput } from "@/utils/index";

import { group_index } from "@/api/user/userGroup";
import BigData from "@/views/bigData/demo.vue";

import LocalForage from "localforage";
import { field_save, puzzleImg, approve_price } from "@/api/currency";
import { login } from "@/api/login";

export default {
  mixins: [mixins],
  directives: {
    // 聚焦元素
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  components: {
    BigData,
  },
  computed: {
    ...mapGetters(["avatar"]),
    reverseSum() {
      return this.percent_list.reverse();
    },
  },
  data() {
    return {
      tableData: [],
      approve_price,
      import_file_name: "",
      percentShow: false,
      percent: 0,
      import_params: {
        send_time: null,
      },
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {
        pid: "",
        category_id: [],
        send_time: getDefaultDate(),
        goods_spu_id: "",
        is_standard: null,
        current_price: null,
        group_id: "",
      },
      // 表格排序
      sortForm: {
        market_price: null,
      },
      // 分类
      options: [],
      groupList: "",
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      offsetParent: true,
      synchronous_price: false,
      // 更多
      moredata: false,
      data_list: [],
      listLoading: false,
      selectArr: [],
      // 批量同步
      percent_gs: 0,
      percent_list: [],
      addedFormVisible: false,
      exclude_online_orders: false,

      shopName: null,
      shopHistoryDia: false,
      // 采购用户数据列表
      procureList: [],
      forms: {
        value: 1,
        type: 0,
      },

      dialogTableVisible: false,
      // 下单数量模态框内的数组
      gridData: [],

      priceHistoryDia: false,
      historyList: [],

      // 批量核价导出的显示隐藏
      pricingDialog: false,
      // 批量核价导出的表单
      pricingForm: {
        time: null,
        region: "",
      },
      show: false,

      // 批量核价导出模板的数据缓存字段
      pricingTemplateList: [],
      goods_spu_id: "",
      orderBatchPriceType: localStorage.getItem("orderBatchPriceType") || 0,
      priceTypeList: [{name: "采购价", value: 0},{name: "库存价", value: 1}],
      taskId: null, // 消息通知ID
    };
  },
  created() {
    // 列表
    this.getNumerical(160);
    this.orderList_pricing();
  },
  mounted() {
    let yindaoList = [
      // 定位到相应的元素位置，如果不设置element，则默认展示在屏幕中央
      {
        element: document.querySelector("#attachments"),
        title: "新增下单数量", // 标题
        intro: `<img src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2312/15/A8DSDKCyXyfvd5XTvNsZJ1YwW6S3ndezAnBgqveR.png"/>`, // 内容
      },
      {
        element: document.querySelector("#telephone"),
        title: "保存报价", // 标题
        intro: `<img src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2312/15/Csws9EbuCYx2DAXBOHrEHTrbVS9OeGM9H6P3EXxC.png"/>`, // 内容
      },
      {
        element: document.querySelector("#telephone"),
        title: "新增改价历史", // 标题
        intro: `<img src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2312/15/Nn5DEZbXTGvCAJ6WnBMXfQicCfS0fhXb6ZQPO2si.png"/>`, // 内容
      },
    ];
    // 获取缓存中是否存在引导列表状态
    let state = localStorage.getItem("yindaoList");
    if (!state) {
      this.$intro()
        .setOptions({
          steps: yindaoList, //上面声明的数组
          nextLabel: "下一步", // 下一个的按钮文字
          prevLabel: "上一步", // 上一个按钮文字
          skipLabel: "跳过", // 跳过指引的按钮文字
          doneLabel: "完成", // 完成按钮的文字
          hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
          hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
          exitOnEsc: false, // 点击键盘的ESC按钮是否退出指引
          exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
          showStepNumbers: true, // 是否显示步骤编号
          disableInteraction: true, // 是否禁用高亮显示框内元素的交互
          showBullets: true, // 是否显示面板的指示点
          overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
          helperElementPadding: 10, // 选中的指引元素周围的填充距离
          showProgress: false, //进度条
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          localStorage.setItem("yindaoList", "true");
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          localStorage.setItem("yindaoList", "true");
        })
        .start();
    }
    window.Echo.channel(
      "batchDispatchPricing." + this.avatar.company_id
    ).listen("BatchDispatchPricingEvent", (e) => {
      this.percent_gs = parseInt(this.percent_gs) + 1;
      if ((this.percent_gs / this.selectArr.length) * 100 >= 100) {
        this.percent = 100;
        return;
      }
      this.percent =
        this.percent_gs / this.selectArr.length
          ? parseInt((this.percent_gs / this.selectArr.length) * 100)
          : 0;
      if (e.notice.msg == "ok") {
        this.percent_list.push({
          num: this.percent,
          type: 1,
          order_id: e.notice.goods_spu_id,
        });
      } else {
        this.percent_list.push({
          num: this.percent,
          type: 2,
          order_id: e.notice.goods_spu_id,
        });
      }
    });
    window.Echo.channel(
      "bacthImportApprovePrice." + this.avatar.company_id
    ).listen("BacthImportApprovePriceEvent", (e) => {
      if (e.notice.code == 200) {
        this.percentShow = true;
        this.percent = Number((e.notice.rate * 100).toFixed(0));
        if (this.percent >= 100) {
          this.percent = 100;
          setTimeout(() => {
            this.percentShow = false;
          }, 3000);
        }
      }
    });
    window.Echo.channel(
      "batchDispatchPricing." + this.avatar.company_id
    ).listen("BatchDispatchPricingEvent", (e) => {
      this.percent_gs = parseInt(this.percent_gs) + 1;
      if ((this.percent_gs / this.selectArr.length) * 100 >= 100) {
        this.percent = 100;
        return;
      }
      this.percent =
        this.percent_gs / this.selectArr.length
          ? parseInt((this.percent_gs / this.selectArr.length) * 100)
          : 0;
      if (e.notice.msg == "ok") {
        this.percent_list.push({
          num: this.percent,
          type: 1,
          order_id: e.notice.goods_spu_id,
        });
      } else {
        this.percent_list.push({
          num: this.percent,
          type: 2,
          order_id: e.notice.goods_spu_id,
        });
      }
    });
    this.setupEchoListeners(this.avatar.company_id);
  },
  destroyed() {
    const company_id =  this.avatar.company_id;
    window.Echo.leave(`batchOrderPrice.${company_id}`);
  },
  methods: {
    // 设置事件监听
    setupEchoListeners(company_id) {
      if(!window.Echo) return;
      window.Echo.channel(`batchOrderPrice.${company_id}`).listen("BatchOrderPriceEvent",(e) => {
        let { rate, order_id, msg, task_id } = e.notice;
        if(task_id == this.taskId) {
          this.percent = parseInt((rate * 100));
          this.percent_list.push({
            num: this.percent,
            type: e.notice.code == 200 ? 1 : 2,
            order_id,
            msg,
          });
        }
      });
    },
    handleNumInput,
    openOrderNumDialog(row) {
      let data = {
        goods_spu_id: row.id,
        send_time: this.form.send_time,
      };
      let query = this.packageApi(data);
      getProcureUserList(query).then((res) => {
        let list = res.data.list;
        this.gridData = list.map((item) => {
          item.old_prices = item.sort_price;
          return item;
        });
        this.dialogTableVisible = true;
      });
    },
    // 提交修改订单价格接口
    changePrice(row, index) {
      let price = null;
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(row.sort_price)) &&
        row.sort_price != ""
      ) {
        price = row.sort_price;
      } else {
        this.$message.error("请输入正确的价格");
        return;
      }
      // 如果不修改时就不调用保存接口
      if (row.old_prices == price) {
        return;
      }
      let data = {
        id: row.id,
        oid: row.oid,
        price: price,
      };
      let query = this.packageApi(data);
      getUpPrice(query).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
        }
      });
    },
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    // 获取当前日期的前7天
    getDays() {
      let dayArr = [];
      let oneDay = 24 * 60 * 60 * 1000;
      for (let i = 0; i < 7; i++) {
        dayArr.unshift(
          this.formatterDate(new Date(Date.now() - i * oneDay), "MM-dd")
        );
      }
      return dayArr;
    },
    //时间格式化
    formatterDate(date, fmt) {
      let nowDate = {
        yyyy: date.getFullYear(), // 年
        MM: date.getMonth() + 1, // 月份
        dd: date.getDate(), //日
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in nowDate) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? nowDate[k]
              : ("00" + nowDate[k]).substr(("" + nowDate[k]).length)
          );
        }
      }
      return fmt;
    },

    // 切换采购方式时，图表数据也要跟着变化
    async changeProcure(e) {
      let echarsList = await this.getProcureUserEchartsList(e);
      // 表格数据
      this.$nextTick(() => {
        // 将获取到的数据传入渲染函数中，进行数据渲染
        this.chartColumn(echarsList);
        this.tableData = echarsList.table_list;
      });
    },
    // 获取图表数据
    getProcureUserEchartsList(id = 1) {
      return new Promise((resolve, reject) => {
        let data = {
          type: id,
          goods_spu_id: this.goods_spu_id,
          unit: "week",
        };
        let query = this.packageApi(data);
        getPurchasePrice(query).then((res) => {
          if (res.errcode == 0) {
            resolve(res.data);
          } else {
            reject(res.errmsg);
          }
        });
      });
    },

    chartColumn(list) {
      let newList = list.line_list;
      let that = this;
      // 获取除今日前的7日日期
      let dataList = this.getDays();
      // x轴展示的内容
      let nameDate = newList.map((item) => item.name);
      // 数据循环战术
      let series = newList.map((item) => {
        let obj = {
          name: item.name,
          type: "line",
          // stack: "Total",
          smooth: true,
          data: item.data.reverse(),
        };
        return obj;
      });
      let colorList = [
        "#F15246",
        "#ffa626",
        "#ede73d",
        "#2cbf51",
        "#3ac2ce",
        "#3574e6",
        "#803cd9",
        "#cc62c6",
        "#7b4611",
      ];
      let option = {
        color: colorList,
        title: {
          text: that.shopName,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: nameDate,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: ["20%", "20%"],
          data: dataList,
          offset: 10,
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };

      this.drawLine("main", option);
    },
    close() {
      this.percent = 0;
      this.percent_gs = 0;
      this.percent_list = [];
      this.orderList_pricing();
      // this.$refs["userListFrom1"].clearValidate();
    },
    handleCeshi() {
      this.$myConfirm("此操作将永久删除该文件, 是否继续?", "测试", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        threesButtonText: "确认并回单",
        type: "warning",
      })
        .then((val) => {
          console.log(val);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 一键同步
    Alltongbu() {
      let ids = [];
      this.data_list.map((item) => {
        ids.push(item.id);
      });
      let form = {
        ids: JSON.stringify(ids),
        send_time: this.form.send_time,
        synchronous_price: this.synchronous_price ? 1 : 0,
      };
      if (ids.length != 0) {
        this.$confirm("确定一键同步所有商品的最新报价?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info",
        })
          .then(() => {
            this.hasUnrecordedOrder().then((res) => {
              if (res.errcode == 0) {
                this.setupmine(form);
              } else {
                let message = `${res.errmsg},确定继续一键同步吗?`;
                this.$confirm(message, "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.setupmine(form);
                  })
                  .catch(() => {});
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.error("暂无可批量同步的商品");
      }
    },
    // 批量同步前查询
    hasUnrecordedOrder() {
      let form = {
        send_time: this.form.send_time,
      };
      return new Promise((resolve, reject) => {
        hasUnrecordedOrder(form).then((res) => {
          resolve(res);
        });
      });
    },
    // 确认一键同步
    setupmine(form) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      orderList_batchDispatchPricing(data).then((res) => {
        this.addedFormVisible = true;
        this.taskId = res.data.task_id;
      });
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass(row) {
      if (row.row.child) {
        if (row.row.child.length === 0) {
          return "maincg_cover";
        }
      }
    },
    // 报价公式-展开行
    formula_meth(row, index) {
      let $table = this.$refs.multipleTable;
      this.data_list[index].down = !this.data_list[index].down;
      this.data_list.map((item) => {
        if (item.down) {
          $table.toggleRowExpansion(item, true);
        } else {
          $table.toggleRowExpansion(item, false);
        }
      });
    },
    // 同步按钮
    formula_tongbu(row, index) {
      let groupArr = [];
      for (let i in row.group) {
        let obj = {
          id: row.group[i].group_id,
          price: row.group[i].real_price,
        };
        groupArr.push(obj);
      }
      let name = `${row.goods.name}【${row.spu_name.title}】`;

      this.$confirm(`确定同步 "${name}" 的最新报价？`, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "info",
      })
        .then(() => {
          let form = {
            id: row.id,
            price: JSON.stringify(groupArr),
            send_time: this.form.send_time,
            synchronous_price: 1,
          };
          this.hasUnrecordedGoods(row).then((res) => {
            // 这里将采购中未入库的校验取消，已和虎哥和安贵确认过，不管有没有未入库的直接调用保存接口
            this.confirmTongbu(form);
            return;
            if (res.errcode == 0) {
              this.confirmTongbu(form);
            } else {
              let message = `"${name}"${res.errmsg},确定继续同步吗?`;
              this.$confirm(message, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.confirmTongbu(form);
                })
                .catch(() => {});
            }
          });
        })
        .catch(() => {});
    },
    // 确认同步
    confirmTongbu(form) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      order_savePrice(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("同步成功");
          this.orderList_pricing();
          this.formula_meth(res, index);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 点击排序
    tableSortChange({column, prop, order}) {
      this.sortForm[prop] = order;
      this.orderList_pricing();
    },
    // 同步保存前查询状态
    hasUnrecordedGoods(row) {
      let form = {
        send_time: this.form.send_time,
        goods_spu_id: row.id,
      };
      return new Promise((resolve, reject) => {
        hasUnrecordedGoods(form).then((res) => {
          resolve(res);
        });
      });
    },
    // 保存
    formula_save(row, index) {
      // 创建一个字段，用于修改了价格后，就储存在该字段内
      let groupArr = [];
      for (let i in row.group) {
        if (row.group[i].isChange) {
          let obj = {
            id: row.group[i].group_id,
            price: row.group[i].real_price,
          };
          groupArr.push(obj);
        }
      }
      let name = `${row.goods.name}【${row.spu_name.title}】`;
      this.$confirm(`确定修改 "${name}" 的配送单价？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          let content = row.group.filter((item) => {
            if (item.isChange) {
              return item;
            }
          });
          let contents = content.map((item) => {
            return {
              name: `${row.goods.name}【${row.spu_name.title}】`,
              old_sortprice: item.oldVal,
              new_sortprice: item.real_price,
              group_id: item.group_id,
            };
          });
          let form = {
            id: row.id,
            price: JSON.stringify(groupArr),
            send_time: this.form.send_time,
            synchronous_price: this.synchronous_price ? 1 : 0,
            contents: JSON.stringify(contents),
          };
          this.hasUnrecordedGoods(row).then((res) => {
            // 这里将采购中未入库的校验取消，已和虎哥和安贵确认过，不管有没有未入库的直接调用保存接口
            this.confirmSave(form, row, index);
            return;
            if (res.errcode == 0) {
              this.confirmSave(form, row, index, 1);
            } else {
              let message = `"${name}"${res.errmsg},确定继续修改吗?`;
              this.$confirm(message, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.confirmSave(form, row, index, 2);
                })
                .catch(() => {});
            }
          });
        })
        .catch(() => {});
    },
    // 保存并同步至分组报价功能
    synchronous(row, index) {
      this.$confirm(
        `是否要同步至分组报价？ <br>执行修改后，会同步修改分组报价公式，没有设置公式的修改SKU市场价`,
        "保存成功",
        {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "info",
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          let groupArr = [];
          for (let i in row.group) {
            let obj = {
              id: row.group[i].group_id,
              price: row.group[i].real_price,
            };
            groupArr.push(obj);
          }
          let form = {
            id: row.id,
            price: JSON.stringify(groupArr),
            send_time: this.form.send_time,
            synchronous_price: 1,
          };
          this.hasUnrecordedGoods(row).then((res) => {
            // 这里将采购中未入库的校验取消，已和虎哥和安贵确认过，不管有没有未入库的直接调用保存接口
            this.confirmTongbu(form);
            return;
            // if (res.errcode == 0) {
            //   this.confirmTongbu(form);
            // } else {
            //   let message = `"${name}"${res.errmsg},确定继续同步吗?`;
            //   this.$confirm(message, "提示", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning",
            //   })
            //     .then(() => {
            //       this.confirmTongbu(form);
            //     })
            //     .catch(() => {});
            // }
          });
        })
        .catch(() => {
          this.$message.success("保存成功");
          this.orderList_pricing();
          this.formula_meth(row, index);
        });
    },
    // 确认保存
    confirmSave(form, row, index) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      order_savePrice(data).then((res) => {
        if (res.errcode == 0) {
          // 调用保存并同步至分组报价功能函数内
          this.$message.success("保存成功");
          if (!this.synchronous_price) {
            // this.synchronous(row, index);
          } else {
            this.orderList_pricing();
            this.formula_meth(row, index);
          }
          // // this.formula_meth(row, index);
          // // this.orderList_pricing();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 分类
    handleChange(value) {
      console.log(value);
    },
    // 点击报价
    offer(index, index1) {
      this.data_list[index].group[index1].disabled =
        !this.data_list[index].group[index1].disabled;
      this.$nextTick(() => {
        this.$refs[
          "maincg" + String(index) + String(index1)
        ][0].$el.offsetParent
          .querySelector("input")
          .focus();
      });
    },
    // 报价焦点离开
    maincgBlur(val, index, index1, row) {
      if (
        /^(\d+\.?)?\d{0,2}$/.test(val.target.value) &&
        val.target.value != ""
      ) {
        this.data_list[index].group[index1].disabled = true;
        if(!this.synchronous_price) {
          this.data_list[index].group.map((item) => (item.isChange = false));
        }
        this.data_list[index].group[index1].isChange = true;
        // 如果没有勾选修改后同步至分组报价 就失去焦点保存
        if (!this.synchronous_price) {
          this.formula_saveN(row, index);
        }
      } else {
        this.$nextTick(() => {
          if (val.target.offsetParent) {
            val.target.offsetParent.querySelector("input").focus();
          }
          this.$message.error("请输入数字");
          val.target.value = 0.0;
        });
      }
    },
    // 失去焦点保存
    formula_saveN(row, index) {
      let groupArr = [];
      for (let i in row.group) {
        if (row.group[i].isChange) {
          let obj = {
            id: row.group[i].group_id,
            price: row.group[i].real_price,
          };
          groupArr.push(obj);
        }
      }
      let name = `${row.goods.name}【${row.spu_name.title}】`;
      let content = row.group.filter((item) => {
        if (item.isChange) {
          return item;
        }
      });
      let contents = content.map((item) => {
        return {
          name: `${row.goods.name}【${row.spu_name.title}】`,
          old_sortprice: item.oldVal,
          new_sortprice: item.real_price,
          group_id: item.group_id,
        };
      });
      let form = {
        id: row.id,
        price: JSON.stringify(groupArr),
        send_time: this.form.send_time,
        synchronous_price: this.synchronous_price ? 1 : 0,
        contents: JSON.stringify(contents),
      };
      this.hasUnrecordedGoods(row).then((res) => {
        // 这里将采购中未入库的校验取消，已和虎哥和安贵确认过，不管有没有未入库的直接调用保存接口
        this.confirmSave(form, row, index);
      });
    },
    // 敲击回车键后调用搜索接口
    startGetting() {
      this.getArticleList();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.orderList_pricing();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeGoodsInput"].name = "";
      this.getArticleList();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.pageSize = pageSize;
    },
    changePage(page) {
      this.page = page;
    },
    // 列表
    orderList_pricing() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.sortForm,
        this.current,
        {
          price_type: this.orderBatchPriceType
        }
      );
      orderList_pricing(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          this.groupList = res.data.groupList;

          res.data.list.map((e) => {
            e.show = false;
            e.red = false;
            if (parseFloat(e.market_price) < parseFloat(e.purchase_price)) {
              e.red = true;
            }
            for (let key in e.group) {
              e.group[key].oldVal = e.group[key].real_price;
              e.group[key].disabled = true;
              e.group[key].isChange = false;
            }
          });
          if (res.data.exclude_online_orders == 1) {
            this.exclude_online_orders = true;
          } else {
            this.exclude_online_orders = false;
          }
          res.data.modify_sync_group_quote == 1
            ? (this.synchronous_price = true)
            : (this.synchronous_price = false);
          this.data_list = res.data.list;
          this.pricingTemplateList = res.data.list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    // 切换价格 
    changeOrderBatchPriceType(e) {
      this.orderBatchPriceType = e;
      localStorage.setItem("orderBatchPriceType",e);
      this.orderList_pricing();
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      return form;
    },
    //排除在线支付订单
    selChange(type) {
      let data;
      if (type == 1) {
        data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          {
            exclude_online_orders: this.exclude_online_orders ? 1 : 0,
          }
        );
      } else {
        data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          {
            modify_sync_group_quote: this.synchronous_price ? 1 : 0,
          }
        );
      }

      setting_company(data).then((res) => {
        if (res.errcode == 0) {
          this.orderList_pricing();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    historyClose() {
      this.forms.value = 1;
      let myChart = echarts.init(document.getElementById("main"));
      myChart.clear();
    },
    // 获取采购用户
    getProcureUserList() {
      return new Promise((resolve, reject) => {
        let query = this.packageApi();
        getProcureUser(query).then((res) => {
          if (res.errcode == 0) {
            resolve(res.data);
          } else {
            reject(res.errmsg);
          }
        });
      });
    },
    async openHistory(row) {
      this.goods_id = row.goods_id;
      this.goods_spu_id = row.id;
      // 获取到采购方式下拉框数据
      let list = await this.getProcureUserList();
      this.procureList = list;
      // 获取对应的采购用户的折线图数据
      let echarsList = await this.getProcureUserEchartsList();
      // 打开采购历史模态框
      this.shopHistoryDia = true;
      this.$nextTick(() => {
        // 将获取到的数据传入渲染函数中，进行数据渲染
        this.chartColumn(echarsList);
        this.tableData = echarsList.table_list;
      });
    },
    // 获取改价历史
    openHistory2(row) {
      let data = {
        goods_spu_id: row.id,
        group_id: this.form.group_id || "",
      };
      let query = this.packageApi(data);
      getHistoryList(query).then((res) => {
        if (res.errcode == 0) {
          this.historyList = res.data.list;
          this.priceHistoryDia = true;
        }
      });
    },
    // 封装请求的sign和timeStamp字段
    packageApi(data = {}) {
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name), data) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      return query;
    },

    // 导出excel
    derive() {
      // 设置配送日期
      this.pricingForm.time = this.form.send_time;
      this.pricingDialog = true;
    },

    handleClose() {
      this.percentShow = false;
      this.import_file_name = null;
      this.pricingDialog = false;
      this.pricingForm.region = "";
      this.getArticleList();
    },

    // 下载导入模板
    downLoadDemo(url) {
      // 重新格式化缓存数据格式
      let data = {
        // 导入模板数据
        list: this.pricingTemplateList,
        // 模板时间
        time: this.pricingForm.time,
        // 分类数据
        classification: this.options,
        // 是否立即下载
        immediately: url == "" ? true : false,
      };
      if (this.pricingTemplateList.length == 0) {
        this.$message.warning("当前时间无需调整批量核价商品!");
        return;
      }
      LocalForage.setItem("pricingTemplate", data)
        .then((res) => {
          console.log("批量核价点击导入模板时缓存成功");
          if (url != "") {
            this.$router.push("/demo");
          } else {
            this.show = true;
          }
        })
        .catch((err) => {
          console.log("批量核价点击导入模板时缓存失败");
        });
    },
    // 批量核价导出模态框中的切换用户分组功能
    changeGroup(e) {
      // 获取当前选择的分组id
      let group = e == "" ? 0 : e;
      // 将数组列表进行深克隆，防止数据修改
      let list = this._.cloneDeep(this.data_list);
      // 根据选中的分组进行数据过滤，获得最终
      let newList = list.map((item, index) => {
        let newGroup = item.group.filter((i) => {
          if (i.group_id == group) {
            return i;
          }
        });
        item.group = newGroup;
        return item;
      });
      this.pricingTemplateList = newList;
    },
    handleUpload() {
      this.import_params.send_time = this.form.send_time;
    },
    importSuccess(response, file, fileList) {
      if (response.errcode != 0) {
        this.$message.error(response.data.errmsg);
        return;
      }
      this.import_file_name = file.name;
      this.percentShow = true;
      this.percent = 1;
    },
    importerr(err, file, fileList) {
      this.$message.error("上传失败");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.mg-b-12 {
  margin-bottom: 12px;
}
.mg-l-5 {
  margin-left: 5px;
}
.maincg_ul {
  ul {
    padding-left: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      // margin-left: 40px;
      // margin-right: 40px;
      margin-top: 6px;
      margin-bottom: 6px;
      align-items: center;
      width: 20%;
      span {
        font-size: $font_14;
        color: $colour_3;
        width: 31%;
        display: block;
      }
      /deep/.el-select {
        margin-left: 5px;
      }
      .maincg_uli {
        // margin-left: 5px;
        position: relative;

        .maincg_uli_s {
          position: absolute;
          right: 10px;
          top: 8px;
          z-index: 9;
          use {
            fill: $menuText;
          }
          &:hover {
            cursor: pointer;
            use {
              fill: $menuActiveText;
            }
          }
        }
      }
    }
  }
}
.maincg_bj {
  p {
    width: 25%;
    color: $menuText;
    font-size: $font_14;
    display: flex;
    align-items: center;
    .maincg_span {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    .navbar_svg {
      position: relative;
      top: -3px;
      margin-left: 10px;

      use {
        fill: #c1c1c1;
      }
    }
  }
}
.mainus_pe {
  svg {
    vertical-align: -3px;
    margin-left: 30px;
  }
  use {
    fill: $menuText;
  }
  &:hover {
    cursor: pointer;
    use {
      fill: $menuActiveText;
    }
  }
}
.notice {
  .progress_list {
    padding: 15px 0;
  }
}

.showDialog {
  color: #03ac54;
  display: flex;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
}

/deep/.el-dialog__body {
  padding: 10px 20px;
}
.pricingDialog {
  width: 100%;
  height: 100%;
  span {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
  }
  &-form {
    margin-top: 10px;
  }
}

/deep/.mainsu_te {
  bottom: 8px;
}

/deep/.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
/deep/.el-table__expand-icon {
  display: none;
}
/deep/.el-link {
  margin-left: 0 !important;
}

.upload-demo {
  display: contents;
}

.tabler {
  width: 100%;
  height: 550px;
  /deep/.el-table tr {
    height: 60px;
  }
}
.filter-box {
  display: flex;
  .filter-text {
    margin-right: 5px;
  }
}
</style>
